{% extends 'base.html' %}
{% block main %}
    <!-- 主内容区 -->
    <main class="flex-grow pt-20 pb-16">
        <!-- 影片网格展示区 -->
        <section class="py-8 bg-gradient-to-b from-dark-blue/20 to-dark">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 md:gap-6">
                    <!-- 影片卡片 1 -->
                    {% for movie in datalist %}
                    <div class="group relative rounded-lg overflow-hidden hover-scale shadow-lg">
                        <div class="aspect-[2/3] relative">
                            <img src="{{ movie.video_cover }}" alt="{{ movie.video_name }}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                            <div class="absolute inset-0 bg-gradient-movie opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-3">
                                <div class="flex justify-between items-center mb-1">
                                    <span class="bg-secondary/90 text-white text-xs font-medium px-2 py-0.5 rounded">{{  movie.vod_remarks  }}</span>
                                    <span class="bg-primary/90 text-white text-xs font-medium px-2 py-0.5 rounded">{{ movie.video_release_time }}</span>
                                </div>
                                <button class="w-full bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white py-2 rounded-md transition-colors flex items-center justify-center">
                                    <a href="/movie?id={{ movie.vod_id }}">
                                    <i class="fa fa-play-circle-o mr-1"></i> 播放
                                    </a>
                                </button>
                            </div>
                        </div>
                        <div class="p-2">
                            <h3 class="font-medium text-white truncate">{{ movie.video_name }}</h3>
                            <p class="text-xs text-gray-medium">{{ movie.vod_class }}</p>
                        </div>
                    </div>
                    {% endfor %}
                </div>

                <!-- 分页导航 -->
                <div class="flex justify-center mt-12">
                    <nav class="flex items-center space-x-3">
                        <!-- 上一页按钮 -->
                        {% if current_page > 1 %}
                        <a href="?keyword={{ wd }}&page={{ current_page - 1 }}" class="w-12 h-12 flex items-center justify-center rounded-lg bg-dark border border-gray-medium/30 text-gray-light hover:border-primary/50 hover:text-white transition-all duration-300 transform hover:scale-105">
                            <i class="fa fa-angle-left"></i>
                        </a>
                        {% else %}
                        <span class="w-12 h-12 flex items-center justify-center rounded-lg bg-dark border border-gray-medium/30 text-gray-light/50 cursor-not-allowed">
                            <i class="fa fa-angle-left"></i>
                        </span>
                        {% endif %}

                        <!-- 页码按钮 -->
                        {% set start_page = max(1, current_page - 5) %}
                        {% set end_page = min(total_pages, start_page + 9) %}

                        {% if start_page > 1 %}
                        <a href="?keyword={{ wd }}&page=1" class="w-12 h-12 flex items-center justify-center rounded-lg bg-dark border border-gray-medium/30 text-gray-light hover:border-primary/50 hover:text-white transition-all duration-300 transform hover:scale-105">1</a>
                        {% endif %}

                        {% if start_page > 2 %}
                        <span class="w-12 h-12 flex items-center justify-center text-gray-light">...</span>
                        {% endif %}

                        {% for page_num in range(start_page, end_page + 1) %}
                            {% if page_num == current_page %}
                            <span class="w-12 h-12 flex items-center justify-center rounded-lg bg-primary text-white font-medium shadow-md">
                                {{ page_num }}
                            </span>
                            {% else %}
                            <a href="?keyword={{ wd }}&page={{ page_num }}" class="w-12 h-12 flex items-center justify-center rounded-lg bg-dark border border-gray-medium/30 text-gray-light hover:border-primary/50 hover:text-white transition-all duration-300 transform hover:scale-105">
                                {{ page_num }}
                            </a>
                            {% endif %}
                        {% endfor %}

                        {% if end_page < total_pages - 1 %}
                        <span class="w-12 h-12 flex items-center justify-center text-gray-light">...</span>
                        {% endif %}

                        {% if end_page < total_pages %}
                        <a href="?keyword={{ wd }}&page={{ total_pages }}" class="w-12 h-12 flex items-center justify-center rounded-lg bg-dark border border-gray-medium/30 text-gray-light hover:border-primary/50 hover:text-white transition-all duration-300 transform hover:scale-105">
                            {{ total_pages }}
                        </a>
                        {% endif %}

                        <!-- 下一页按钮 -->
                        {% if current_page < total_pages %}
                        <a href="?keyword={{ wd }}&page={{ current_page + 1 }}" class="w-12 h-12 flex items-center justify-center rounded-lg bg-dark border border-gray-medium/30 text-gray-light hover:border-primary/50 hover:text-white transition-all duration-300 transform hover:scale-105">
                            <i class="fa fa-angle-right"></i>
                        </a>
                        {% else %}
                        <span class="w-12 h-12 flex items-center justify-center rounded-lg bg-dark border border-gray-medium/30 text-gray-light/50 cursor-not-allowed">
                            <i class="fa fa-angle-right"></i>
                        </span>
                        {% endif %}
                    </nav>
                </div>

            </div>
        </section>
    </main>

{% endblock main %}

{% block end_script %}
<script>
    // 分页导航动画效果增强
    document.querySelectorAll('.pagination a').forEach(link => {
        link.addEventListener('mouseenter', function() {
            this.classList.add('scale-110');
        });
        link.addEventListener('mouseleave', function() {
            this.classList.remove('scale-110');
        });
    });
</script>
{% endblock end_script %}